import * as echarts from 'echarts';

// ECharts Option
const setChartOption = () => {
  // mock数据
  const dataArr = {
    xdata: ["1月", "2月", "3月", "4月", "5月", "6月", "7月","8月", "9月", "10月", "11月", "12月"],
    vaccination: [600, 540, 680, 750, 550, 580, 890,430,232,343,454,123],
    unvaccinated: [700, 800, 900, 500, 300, 400, 500],
    unvaccinatedTwo: [400, 300, 500, 200, 100, 100, 300,123,343,231,322,323,123],
    rateDataOne: [1000, 1300, 1200, 800, 600, 700, 900],
  };

  // tooltip
  const tooltip = {
    trigger: "axis",
    textStyle: { fontSize: "100%" },
    formatter: (params) => {
      let rander = params
        .map((item) =>
          item.seriesType !== "pictorialBar"
            ? `<div>${item.seriesName}: ${
                item.seriesType !== "line" ? item.value : item.value + "%"
              }</div>`
            : ""
        )
        .join("");
      return `
              <div>${params[0].axisValue}</div>
              ${rander}
          `;
    },
  };
  const legend = {
    data: [
      "状态报警推送",
      "阈值告警推送",
    ],
    textStyle: { fontSize: 14, color: "#fff" },
    itemWidth: 18,
    itemHeight: 10,
    itemGap: 10,
    top: "2%",
    selectedMode: false,
  };
  const grid = { top: "14%", left: "5%", right: "5%", bottom: "10%" };
  // xAxis
  const xAxis = {
    axisTick: { show: true },
    axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
    axisLabel: { textStyle: { fontSize: 14, color: "#fff" } },
    data: dataArr.xdata,
  };

  // yAxis
  const yAxis = [
    {
      name:"单位: 次",
      nameTextStyle: {
        color: '#fff',
      },
      axisTick: { show: false },
      axisLine: { show: false },
      splitLine: { lineStyle: { type: 'dashed', color: "rgba(6, 183, 253, 0.2)" } },
      axisLabel: { textStyle: { fontSize: 14, color: "#fff" } },
    },
    {
      show: true,
      max: 100,
      splitLine: { show: false },
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        textStyle: { fontSize: 14, color: "#fff" },
        formatter: (params) => {
          return `${params}%`;
        },
      },
    },
  ];

  // series
  const series = [
    {
      z: 1,
      name: "上部1",
      type: "pictorialBar",
      symbolPosition: "end",
      data: dataArr.vaccination,
      symbol: "diamond",
      symbolOffset: ["-28%", "-50%"],
      symbolSize: [19, 10],
      itemStyle: {
        borderColor: "#2fffa4",
        color: "#2fffa4",
      },
    },
    {
      z: 1,
      type: "bar",
      name: "状态报警推送",
      barWidth: 20,
      barGap: "-50%",
      data: dataArr.vaccination,
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            { offset: 0, color: "rgba(29, 245, 160, .7)" },
            { offset: 0.5, color: "rgba(29, 245, 160, .7)" },
            { offset: 0.5, color: "rgba(29, 245, 160, .3)" },
            { offset: 1, color: "rgba(29, 245, 160, .3)" },
          ],
        },
      },
    },
    {
      z: 3,
      name: "上部1",
      type: "pictorialBar",
      symbolPosition: "end",
      data: dataArr.unvaccinatedTwo,
      symbol: "diamond",
      symbolOffset: ["28%", "-50%"],
      symbolSize: [19, 10],
      itemStyle: {
        borderColor: "#ffd11a",
        color: "#ffd11a",
      },
    },
    {
      z: 3,
      type: "bar",
      name: "阈值告警推送",
      barWidth: 20,
      data: dataArr.unvaccinatedTwo,
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            { offset: 0, color: "rgba(255, 209, 26, .7)" },
            { offset: 0.5, color: "rgba(255, 209, 26, .7)" },
            { offset: 0.5, color: "rgba(255, 209, 26, .3)" },
            { offset: 1, color: "rgba(255, 209, 26, .3)" },
          ],
        },
      },
    },
  ];
  const chartOption = {
    toolbox: {
      show: false,
    },
    tooltip,
    xAxis,
    yAxis,
    series,
    grid,
    legend,
  };

  return chartOption;
};
export default setChartOption;
